/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="pid-box">
			<block v-for="(item,index) in ad" :key="index">
				<navigator class="copyright" :url="item.ad_link" role="navigation" v-if="ad">
					<image class="wh100" :src="hostUrl+item.ad_code" role="img"></image>
				</navigator>
			</block>
		</view>
		
		<view class="nav">
			<navigator @tap="openRegionsModal" class="nav-item" :class="[activeNavId==1?'nav-item-on':'']" data-i="1" role="navigation">
				地区
				<view class="ico-dg">
					<image class="wh100" :src="imgUrl+'index/dg.png'" role="img"></image>
				</view>
				<view class="ico-dg-h">
					<image class="wh100" :src="imgUrl+'index/d.png'" role="img"></image>
				</view>
			</navigator>
			<navigator @tap="openRegionsModal" class="nav-item" :class="[activeNavId==2?'nav-item-on':'']" data-i="2" role="navigation">
				类别
				<view class="ico-dg">
					<image class="wh100" :src="imgUrl+'index/dg.png'" role="img"></image>
				</view>
				<view class="ico-dg-h">
					<image class="wh100" :src="imgUrl+'index/d.png'" role="img"></image>
				</view>
			</navigator>
			<navigator @tap="openRegionsModal" class="nav-item" :class="[activeNavId==3?'nav-item-on':'']" data-i="3" role="navigation">
				销量
				<view class="ico-dg">
					<image class="wh100" :src="imgUrl+'index/dg.png'" role="img"></image>
				</view>
				<view class="ico-dg-h">
					<image class="wh100" :src="imgUrl+'index/d.png'" role="img"></image>
				</view>
			</navigator>
		</view>
		<block v-for="(item,index) in storeList" :key='index'>
			<view class="shops-item">
			<view class="shops-info">
				<navigator class="shops-pic" :url="'/pages/store/index/index?store_id='+item.store_id" role="navigation">
					<image class="wh100" :src="hostUrl+item.store_logo"role="img"></image>
				</navigator>
				<navigator class="shops-mes" :url="'/pages/store/index/index?store_id='+item.store_id" role="navigation">
					<view class="shops-name">{{item.store_name}}</view>
					<view class="shops-des">已经有{{item.store_collect}}人关注</view>
				</navigator>
				<view @tap="focusStore" class="follow-dtns" :data-index="index" :data-ind="item.focusActive" :class="[item.focusActive==1?'is-focus':'']" :data-id="item.store_id">{{item.focusActive?'已':''}}关注</view>
			
			</view>
			<view class="scores-list">
				<view class="scores-item">
					宝贝描述
					<text class="co-red">
						{{item.store_desccredit}}分
					</text>
					<text class="scores-grade">
						{{item.store_desccredit_desc}}
					</text>
				</view>
				<view class="scores-item">
					卖家服务
					<text class="co-red">
						{{item.store_servicecredit}}分
					</text>
					<text class="scores-grade">
						{{item.store_servicecredit_desc}}
					</text>
				</view>
				<view class="scores-item">
					物流速度
					<text class="co-red">
						{{item.store_deliverycredit}}分
					</text>
					<text class="scores-grade">
						 {{item.store_deliverycredit_desc}}
					</text>
				</view>
			</view>
			<view class="recommend-list">
				<block v-for="(item,index) in item.goods_list" :key="index" v-if="index<3">
					<view class="recommend-item">
						<navigator class="goods-pic" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id" role="navigation">
							<image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"role="img"></image>
						</navigator>
						<view class="goods-name ellipsis-1">{{item.goods_name}} </view>
						<view class="goods-pirce">￥{{item.shop_price}}</view>
					</view>
				</block>
				
			</view>
		</view>
		</block>
		<!-- 区域组件 -->
		<address-list :hide="ishide" ref="child"  @closeRegionsModal="close"></address-list>
		<!-- 类别 -->
		<view @tap="closeCategoryModal"class="cover-layer" v-show="ishide1" @touchmove.prevent>
			<view class="category-list" v-show="ishide1">
				<block v-for="(item,index) in classifyData">
					<view @tap="selectCategory"class="category-item"  :data-scid="item.sc_id">{{item.sc_name}}</view>
				</block>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import {
		getClassifyAd,
		
		getStoreStreet,
		getStoreClassify,
		getStoreFocusList,
		storeFocus,
		delStoreFocus
	} from "@/api/api.js";
	import config from "@/api/config.js";
	import AddressList from "@/components/addresslist/addresslist.vue";
	import common from "@/common/common.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				hostUrl: config.host, //图片路径前缀
				imgUrl:config.imgUrl,
				ad: "", //广告
				activeNavId: -1, //导航栏
				ishide:false,
				ishide1:false,
				
				
				loginInfo:uni.getStorageSync('loginInfo') || null,//登录信息
				classifyData:"",//分类
				total:"",//数据
				storeList:[],//店铺
				
				longitude:"",//经度
				latitude:"",//纬度
				focusList:[],//关注list
				params:{
					p:1,
					size:10,//默认10条数据
					scid:"",//分类id
					order:"",//排序参数
					cityId:"",//城市id
					loginInfo:"",//登录
				}
			};
		},
		computed: {
			...mapState(['hasLogin','imgType','goodsImgHeight','goodsImgWidth'])
		},
		components:{
			AddressList
		},
		onLoad() {
			this._getClassifyAd(535);
			
			this._getStoreClassify();
		},
		onShow(){
		},
		methods: {
			_getClassifyAd(pid) { //品牌街广告图 固定图片id 533
				getClassifyAd(pid).then(res => {
					console.log(res)
					this.ad = res.records;
				}).then(()=>{
					this.islogin()
				})
			},
			islogin(){
				/*重新获取登录状态*/
				if(this.hasLogin){
				
					// this.getData(this.params)
					this._getStoreStreet(this.params)
				}else{
					this._getStoreStreet(this.params)
				}
			},
			_getStoreStreet(params){//获取店铺
				getStoreStreet(params).then(res=>{
					// console.log(res)
					Array.from(res.records, item => item.focusActive = 0)
					this.storeList=this.storeList.concat(res.records);
					console.log("数组",res.records)
					this.total=res.total
					// this._getStoreFocusList()
				}).then(()=>{
					if(this.hasLogin){
						this.getStoreFocusList()
					}
				})

			},
			getStoreFocusList(){
				getStoreFocusList().then(res=>{
					if(res.length>0){
						this.storeList.map(item=>{
							res.map(v=>{
								if(v.store_id==item.store_id){
									item.focusActive=1;
								}
							})
						})
					}
				})
			},
			/*将店铺数据，和已关注数据整合*/ 
			// getData(params){
			// 	Promise.all([getStoreStreet(params),getStoreFocusList()]).then(res=>{
			// 		const storeList=this.storeList.concat(res[0].records)
			// 		this.storeList=this.storeList.concat(res[0].records)
			// 		this.total=res[0].total
			// 		const focusList=res[1]
			// 		// console.log(res)
			// 		storeList.forEach((i,ind)=>{
			// 			focusList.forEach((k,ind)=>{
			// 				if(i.store_id==k.store_id){
			// 					console.log(i)
			// 					i.focusActive=1; //已关注状态
			// 					console.log(i)
			// 				}
			// 			})
			// 		})
			// 		// console.log(x)
			// 		this.storeList=storeList;
			// 	})
			// },
			_getStoreClassify(){//店铺分类
				getStoreClassify().then(res=>{
					console.log(res);
					this.classifyData=res
				})
			},
			onReachBottom(){//下拉加载数据
				
				if(this.storeList.length<this.total){
					this.params.p++;
					if(this.hasLogin){
						// this.getData(this.params)
						this._getStoreStreet(this.params)
					}else{
						this._getStoreStreet(this.params);
					}
					
				}else{
					uni.showToast({
						icon:"none",
					    title: '加载完了',
					    duration: 2000
					});
					 return false;
				}
				
				
				
			},
			/*关注*/
			_storeFocus(storeId,index){
				storeFocus(storeId,index).then(res=>{
					console.log(res)
					if(res.status==1){
						this.storeList[index].focusActive=1;
					}
				})
			},
			/*取消关注*/
			_delStoreFocus(storeId,index){
				delStoreFocus(storeId,index).then(res=>{
					console.log(res)
					if(res.status==1){
						this.storeList[index].focusActive=0;
						
					}
				})
			},
			/*关注*/ 
			focusStore(e){
				if(this.hasLogin){
					
					let storeId=e.currentTarget.dataset.id;
					let ind =e.currentTarget.dataset.ind;
					let index = e.currentTarget.dataset.index;
					console.log(ind)
					/*ind为undefined时 就点击关注*/ 
					if(ind==1){
						this._delStoreFocus(storeId,index)
					}else{
						this._storeFocus(storeId,index)
					}
				
					
					
				}else{
					common.islogin()
				}
			},
			openRegionsModal(e) {//打开区域选择
				this.activeNavId = e.currentTarget.dataset.i
				if(this.activeNavId==1){
					this.ishide=true
					this.$refs.child._getAddress(0)
				}
				if(this.activeNavId==2){
					this.ishide1=true;
					
				}
				if(this.activeNavId==3){
					var order="store_sales";
					var params={
						p:1,//默认10条数据
						scid:"",//分类id
						order:order,//排序参数
						cityId:"",//城市id
						
					}
					this.params.p=1;
					this.storeList.length=0;
					this._getStoreStreet(params)
				}
			},
			selectCategory(e){
				console.log(e)
				this.params.p=1;
				this.storeList.length=0;
				this.params.scid= e.currentTarget.dataset.scid
				// console.log(scid)
				this._getStoreStreet(this.params)
			},
			closeCategoryModal(){
				this.ishide1=false;
			},
			close(e){
				console.log(e)
				this.storeList.length=0;
				var cityId=e.addressId
				var params={
					p:1,//默认10条数据
					scid:"",//分类id
					order:"",//排序参数
					cityId:cityId,//城市id
					
				}
				this.ishide=e.ishide;
				this._getStoreStreet(params);
			}
		}
	}
</script>

<style lang="scss">
	.banner {
		height: 240rpx;
	}
	.pid-box{
		display:flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

	}
	.copyright{
		width:274rpx;
		height:350rpx;
	}
	.nav {
		height: 90rpx;
		background-color: #fff;
		border-bottom: 1px solid #f3f3f3;
	}

	.nav-item {
		float: left;
		width: 33.33%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.nav-item .ico-dg {
		width: 24rpx;
		height: 12rpx;
		margin-left: 10rpx;
		line-height: 0;
	}

	.ico-dg-h {
		display: none;
		width: 24rpx;
		height: 12rpx;
		margin-left: 10rpx;
		line-height: 0;
	}

	.nav-item-on {
		color: #ff3b3b;
	}

	.nav-item-on .ico-dg-h {
		display: block;
	}

	.nav-item-on .ico-dg {
		display: none;
	}

	.shops-item {
		padding: 30rpx;
		margin: 10rpx 0;
		background-color: #fff;
		border-bottom: 1px solid #f3f3f3;
	}

	.shops-info {
		display: flex;
		height: 160rpx;
	}

	.shops-pic {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		border: 1px solid #f3f3f3;
	}

	.shops-mes {
		width: 380rpx;
		height: 124rpx;
		padding-top: 30rpx;
		overflow: hidden;
	}

	.shops-mes>view {
		height: 36rpx;
		line-height: 36rpx;
	}

	.shops-name {
		font-size: 28rpx;
		color: #333;
	}

	.shops-des {
		font-size: 24rpx;
		color: #666;
	}

	.follow-dtns {
		width: 90rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #ff3b3b;
		line-height: 50rpx;
		text-align: center;
		border: 1px solid #ff3b3b;
		border-radius: 5rpx;
		margin-left: 14rpx;
		margin-top: 38rpx;
	}

	.is-focus {
		color: white;
		border: 0;
		background-color: #ccc;
	}

	.scores-list {
		display: flex;
		height: 120rpx;
	}

	.scores-item {
		width: 33.33%;
		height: 44rpx;
		font-size: 24rpx;
		line-height: 44rpx;
		padding: 38rpx 0;
		overflow: hidden;
	}

	.scores-grade {
		display: inline-block;
		width: 44rpx;
		height: 44rpx;
		color: #fff;
		text-align: center;
		background-color: #ff3b3b;
		border-radius: 50%;
	}

	.recommend-list {
		display: flex;
	}

	.recommend-item {
		width: 220rpx;
		margin-right: 10rpx;
	}

	.recommend-item:last-child {
		margin-right: 0;
	}

	.goods-pic {
		width: 220rpx;
		height: 220rpx;
	}

	.goods-name {
		width: 220rpx;
		height: 32rpx;
		font-size: 24rpx;
		line-height: 32rpx;
		margin-bottom: 20rpx;
	}

	.goods-pirce {
		font-size: 28rpx;
		line-height: 1;
		text-align: center;
		color: #ff3b3b;
	}

	.category-list {
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 12;
		width: 540rpx;
		height: 540rpx;
		margin-top: -300rpx;
		margin-left: -300rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.category-item {
		float: left;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
		border: 1px solid #f3f3f3;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.category-item-on {
		border-color: #ff3b3b;
		color: #ff3b3b;
	}
</style>
